<template>
  <div class="home">
    <!-- baner -->
    <van-swipe :autoplay="5000" class="swipe">
      <van-swipe-item>
        <img src="@/assets/img/banner1_3.png" />
      </van-swipe-item>
      <van-swipe-item>
        <img src="@/assets/img/banner1_4.png" />
      </van-swipe-item>
      <van-swipe-item>
        <img src="@/assets/img/banner1_2.png" />
      </van-swipe-item>
    </van-swipe>
    <!-- nav -->
    <nav>
      <ul class="clearfix ">
        <li @click="navClick('预约检测')">
          <div>
            <p>预约检测</p>
            <p>极速预约</p>
          </div>
          <!-- <img src="@/assets/img/icon/nav-1.png" /> -->
        </li>
        <li @click="navClick('到场检测')">
          <div>
            <p>到场检测</p>
            <p>全方位检测</p>
          </div>
          <!-- <img src="@/assets/img/icon/nav-2.png" /> -->
        </li>
        <li @click="navClick('打印单据')">
          <div>
            <!-- <p>进度查询</p>
            <p>SCHEDULING</p> -->
            <p>打印单据</p>
            <p>免费打印</p>
          </div>
          <!-- <img src="@/assets/img/icon/nav-4.png" /> -->
          <!-- <img src="@/assets/img/icon/1.png" alt=""> -->
        </li>
        <li @click="navClick('六年免检')">
          <div>
            <p>六年免检</p>
            <p>极速免检</p>
          </div>
          <!-- <img src="@/assets/img/icon/2.png" /> -->
        </li>
      </ul>
    </nav>
    <!-- 智能助手 -->
    <section class="assistant">
      <!-- <header class="clearfix">
        <div class="fl">
          <span class="fl"></span>
          <span class="fl"></span>
        </div>
        <strong class="fl">智能助手</strong>
      </header> -->
      <ul>
        <li @click="iconNavClick('新车检测')">
          <div class="img"><img src="@/assets/img/icon/xcjc.png" /></div>
          <span>新车检测</span>
        </li>
        <li @click="iconNavClick('挂车')">
          <div class="img" >
            <img src="@/assets/img/icon/gcjc.png" />
          </div>
          <span>挂车检测</span>
        </li>
        <li @click="iconNavClick('事故车检测')">
          <div class="img">
            <img src="@/assets/img/icon/sgcjc.png" />
          </div>
          <span>事故车检测</span>
        </li>
        <li @click="iconNavClick('变更车检测')">
          <div class="img"> <img src="@/assets/img/icon/bgcjc.png" /></div>
          <span>变更车检测</span>
        </li>
        <li @click="iconNavClick('客车综检')">
          <div class="img">
            <img src="@/assets/img/icon/kczj.png" />
          </div>
          <span>客车综检</span>
        </li>
        <li @click="iconNavClick('货车综检')">
          <div class="img">
            <img src="@/assets/img/icon/hczj.png" />
          </div>
          <span>货车综检</span>
        </li>
        <li @click="iconNavClick('违章查询')">
          <div class="img">
            <img src="@/assets/img/icon/wzcx.png" />
          </div>
          <span>违章查询</span>
        </li>
        <li @click="iconNavClick('开具发票')">
          <div class="img"><img src="@/assets/img/icon/kjfp.png" /></div>
          <span>开具发票</span>
        </li>
        <li @click="iconNavClick('年检须知')">
          <div class="img"><img src="@/assets/img/icon/njxz.png" /></div>
          <span>年检须知</span>
        </li>
        <li @click="iconNavClick('年检流程')">
          <div class="img"><img src="@/assets/img/icon/njlc.png" /></div>
          <span>年检流程</span>
        </li>
        <li @click="iconNavClick('预约流程')">
          <div class="img"><img src="@/assets/img/icon/yylc.png" /></div>
          <span>预约流程</span>
        </li>
        <li @click="iconNavClick('问卷调查')">
          <div class="img"><img src="@/assets/img/icon/wjdc.png" /></div>
          <span>问卷调查</span>
        </li>
      </ul>
    </section>
    <!-- 优势对比 -->
    <section class="make-an-pointment">
      <header class="clearfix">
        <div class="fl">
          <span class="fl"></span>
          <span class="fl"></span>
        </div>
        <strong class="fl">优势对比</strong>
      </header>
      <div class="cont">
        <div class="left">
          <h3>传统方式年检</h3>
          <ul>
            <li>
              <p>前往登记大厅</p>
            </li>
            <li>
              <p>委托登记</p>
            </li>
            <li>
              <p>缴费</p>
            </li>
            <li>
              <p>打印申请表</p>
            </li>
            <li>
              <p>环保检测登录</p>
            </li>
            <li>
              <p>安全技术检测登录</p>
            </li>
            <li>
              <p>上线检测</p>
            </li>
            <li>
              <p>领取合格标志</p>
            </li>
          </ul>
        </div>
        
        <div class="right">
          <h3>使用大厂车检年检</h3>
          <ul>
            <li>
              <p>网上办理</p>
            </li>
            <li>
              <p>到站直接上线检测</p>
            </li>
            <li>
              <p>领取合格标志</p>
            </li>
            
          </ul>
        </div>
      </div>
      
    </section>
    <!-- 底部banner -->
    
    <div class="phone_num">
      <!-- 1小时快检 树立车检效率新标杆<br>
      咨询电话：0316-8961818 -->
    </div>
    <!-- 底 导航 -->
    <footer class="flex-row-wrap">
      <div class="item" @click="navBottom(2)">
        <div class="img" :class="active==0?'active':''"></div>
        <p :class="active==0?'active':''">首页</p>
      </div>
      <div class="item" @click="navBottom(1)">
        <div class="img" :class="active==1?'active':''"></div>
        <p :class="active==1?'active':''">订单</p>
      </div>
      <div class="item" @click="navBottom(3)">
        <div class="img" :class="active==2?'active':''"></div>
        <p :class="active==2?'active':''">我的</p>
      </div>
    </footer>
    <!--等待动画-->
    <van-overlay :show="show" @click="show = false">
      <div class="loading">
        <van-loading color="#1989fa" size="24px" vertical>加载中...</van-loading>
      </div>
    </van-overlay>
  </div>
</template>

<script>
import { setLocal, getLocal, delLocal } from '@/utils/storage'
export default {
  name: 'Home',
  data() {
    return {
      urlCode: this.$route.query.code,
      // 用户信息
      carUser: JSON.parse(getLocal('userInfo')),
      // 车辆信息
      vehicleList: [],
      // 是否关注公众号，1已关注 0 未关注
      isFollow: 0,
      show:true,
      active:0,
    }
  },
  created() {
    const _this = this
    this.authorizationFn()
    //this.postCarInfo()
    
  },
  methods: {
    //底部导航的路由
    navBottom(type) {
      if (type == 1) {
        this.$router.push('/order')
			} else if (type == 3) {
				this.$router.push('/personalCenter')
			} else {
				//this.$router.push('/')
			}
    },
    navClick(e) {
      //if (this.isFollowFn()) return
      if (e === '预约检测') {
        if (this.vehicleList.length) {
          this.$router.push({
            name: 'vehicleInfo',
            params: {
              state: 'convention',
              vehicleList: this.vehicleList
            }
          })
          setLocal('state', 'convention')

          // this.$router.push('/makeAnAppointment')
        } else {
          this.$router.push('/vehicleDetails')
          setLocal('state', 'convention')
          delLocal('edit')
          delLocal('info')
        }
      }
      if (e === '到场检测') {
        if (this.vehicleList.length) {
          this.$router.push({
            name: 'vehicleInfo',
            params: {
              state: 'present',
              vehicleList: this.vehicleList
            }
          })
          setLocal('state', 'present')
        } else {
          this.$router.push('/vehicleDetails')
          setLocal('state', 'present')
          delLocal('edit')
          delLocal('info')
        }
      }
      if (e === '六年免检') {
        console.log('六年免检---------------------')
        // this.$router.push('/orderPay')
        //this.$router.push('/order')
        this.$router.push({
          name: 'inspectionFree',
          params: {
            carUser:this.carUser
          }
        }) 
      }
      if (e === '打印单据') {
        // this.$router.push('/orderPay')
        this.$router.push('/printDocuments')
      }
      /* if (e === '进度查询') {
        this.$router.push('/order?state=progress')
        // this.$router.push('/progress')
        // location.href = 'https://mp.weixin.qq.com/s/3UUAO9am07UGHYDZmcKyqw'
      } */
    },

    iconNavClick(e) {
      //if (this.isFollowFn()) return
      if (e === '打印单据') {
        this.$router.push('/printDocuments')
      }
      if (e === '年检须知') {
        this.$router.push('/notice')
      }
      if (e === '年检流程') {
        this.$router.push('/inspectionProcess')
      }
      if (e === '预约流程') {
        this.$router.push('/reservationProcess')
      }
      if (e === '开具发票') {
        this.$router.push({
          name: 'invoice',
          params: {
            carUser:this.carUser
          }
        }) 
      }
      if (e === '问卷调查') {
        this.$router.push({
          name:'questionnaire',
          params:{
            carUser:this.carUser
          }
        })
      }
      if (e === '违章查询') {
        console.log('违章查询')
        window.location.href = 'https://he.122.gov.cn/?from=groupmessage&isappinstalled=0#/inquiry'
      }
      if (e === '新车检测') {
        this.$router.push({
          name:'comprehensiveInspection',
          params:{
            carUser:this.carUser,
            type:3
          }
        })
      }
      if (e === '事故车检测') {
        this.$router.push({
          name:'comprehensiveInspection',
          params:{
            carUser:this.carUser,
            type:5
          }
        })
      }
      if (e === '变更车检测') {
        this.$router.push({
          name:'comprehensiveInspection',
          params:{
            carUser:this.carUser,
            type:4
          }
        })
      }
      if (e === '客车综检') {
        this.$router.push({
          name:'comprehensiveInspection',
          params:{
            carUser:this.carUser,
            type:2
          }
        })
      }
      if (e === '货车综检') {
        this.$router.push({
          name:'comprehensiveInspection',
          params:{
            carUser:this.carUser,
            type:1
          }
        })
      }
      if (e === '挂车') {
        this.$router.push({
          name:'truck',
          params:{
            carUser:this.carUser
          }
        })
        delLocal('edit')
        delLocal('info')
      }
      /* if (e === '其它检测') {
        this.$router.push({
          name:'other',
          params:{
            carUser:this.carUser
          }
        })
      } */

    },
    //  --------------------------- ajax请求 ---------------------------
    // 查询车辆信息
    async postCarInfo() {
      let params = {
        userId: null
      }
      if (this.carUser) {
        if (this.carUser.id) {
          params = {
            userId: this.carUser.id,
            //openId:'oUCkQsy6R5bwoQrpF76pvf3B3eog'
            //openId:'oUCkQs8LuVs-cjClLJdjLs792rUI',//Xtsi
            openId: getLocal('openid'),
          }
        }
      }
      
      let res = await this.$api.PostCarInfo(params)
      this.show = false
      console.log(res, '------------------- 查询车辆信息 ----------------')
      if (res) {
        if (res.status === 200) {
          this.vehicleList = res.data.list
        }
      }
    },
 
    // 获取微信openId
    async getOpenId() {
      console.log('正在获取openid--------------------------------')
      let res = await this.$api.getOpenId({
        code: this.urlCode
      })
      console.log(res, '-----------获取微信openId---------')
      this.show = false
      if (res.status === 200) {
        setLocal('openid', res.data.openid)
        this.postCarUsers({
          //openId:'oUCkQsy6R5bwoQrpF76pvf3B3eog'
          //openId:'oUCkQs8LuVs-cjClLJdjLs792rUI'
          //测试注销
          openId: res.data.openid
          
        })
        //this.judgeIsFollow()
      }
    },
    // 查询用户信息
    async postCarUsers(params) {
      console.log('正在查询用户信息--------------------------------')
      let res = await this.$api.PostCarUsers(params)
      console.log(res, '-----------查询用户信息---------')
      this.show = false
      if (res) {
        if (res.status === 200) {
          if (!res.data) {
            this.postRegisterUsers()
          } else {
            this.carUser = res.data
            this.postCarInfo()
            setLocal('userInfo', JSON.stringify(res.data))
          }
        }else{
          
        }
      }
    },
    // 注册用户信息
    async postRegisterUsers() {
      let res = await this.$api.PostRegisterUsers({
        //openId:'oUCkQsy6R5bwoQrpF76pvf3B3eog'
        //openId:'oUCkQs8LuVs-cjClLJdjLs792rUI'
        //测试注销
        openId: getLocal('openid')
        
      })
      console.log(res, '-----------获取用户信息---------')
      if (res.status === 200) {
        this.carUser = res.data.data
        setLocal('userInfo', JSON.stringify(res.data))
      }
    },

    // 判断用户是否关注公众号
    async judgeIsFollow() {
      let res = await this.$api.judgeIsFollow({
        //openId:'oUCkQsy6R5bwoQrpF76pvf3B3eog'
        //openId:'oUCkQs8LuVs-cjClLJdjLs792rUI'
        //测试注销
        openId: getLocal('openid')
        
      })
      console.log(res, '--------- 判断用户是否关注公众号 ---------')
      if (res) {
        if (res.status === 200) {
          this.isFollow = res.data.isFollow
          
        }
      }
      this.show = false
    },

    //  --------------------------- 方法 ---------------------------
    // 用户授权查询
    authorizationFn() {
      // debugger
      if (!localStorage.getItem('userInfo')) {
        console.log('用户信息-----------',localStorage.getItem('userInfo'))
        if (!this.$route.query.from && !this.$route.query.code) {
          let href = location.href
          //let _nowUrl = encodeURIComponent('https://www.dccjyuyue.com/')
          let _nowUrl = encodeURIComponent('http://test.dccjyuyue.com/')
          console.log('准备跳转------------------')
          if (!localStorage.getItem('openid') || localStorage.getItem('openid') === '') {
            setTimeout(
	          function(){
	            window.location = `https://open.weixin.qq.com/connect/oauth2/authorize?appId=${
              process.env.VUE_APP_APPID}&redirect_uri=${_nowUrl}&response_type=code&scope=snsapi_base&state=123#wechat_redirect`;
            }, 0);
          }else{
            this.postCarUsers({openId:localStorage.getItem('openid')})
            this.postCarInfo()
            this.judgeIsFollow()
          }
        } else {
          if (!localStorage.getItem('openid') || localStorage.getItem('openid') === '') {
            console.log('getOpenId等于空-----------')
            this.getOpenId()
          }else{
            this.postCarInfo()
            this.judgeIsFollow()
          }
        }

          /* this.postCarUsers({
            //openId:'oUCkQs8LuVs-cjClLJdjLs792rUI'
            //测试注销
            //openId: res.data.openid
            openId:'oUCkQsy6R5bwoQrpF76pvf3B3eog'
          }) */
          //this.judgeIsFollow()

      } else {
        this.postCarInfo()
        //this.judgeIsFollow()
      }
    },
    //
    isFollowFn() {
      if (!this.isFollow) {
        this.$toast('您还未关注公众号，不能操作哦~ ')
        return true
      }
    }
  }
}
</script>

<style lang="less" scoped>

.home {
  height: 100%;
  padding-bottom: 1.2rem;
  .swipe {
    width: 8.9rem;
    margin: 0.3rem auto 0 auto;
    border-radius: 0.15rem;
    img {
      width: 100%;
      height: 100%;
    }
  }
  nav {
    ul{
      display: flex;
      flex-wrap: wrap;
      padding: 0 0.53rem;
      li {
        width: 4.26rem;
        height: 1.89rem;
        background:url(../assets/img/icon/yyjc.png)center/cover no-repeat;
        margin-top: 0.4rem;
        div{
          margin-left: 0.4rem;
          margin-top: 0.46rem;
          p:nth-child(1){
            font-size: 0.4rem;
            font-family:PingFangSC-Semibold,PingFang SC;
            font-weight:600;
          }
          p:nth-child(2){
            width: 1.33rem;
            height: 0.45rem;
            font-size: 0.29rem;
            background-color:#F87042 ;
            color: #fff;
            font-family:PingFangSC-Regular,PingFang SC;
            font-weight:400;
            text-align: center;
            line-height: 0.45rem;
            margin-top: 0.08rem;
            border-radius: 0.1rem;
          }
        }
      }
      li:nth-child(2){
        background:url(../assets/img/icon/dcjc.png)center/cover no-repeat;
        p:nth-child(2){
          width: 1.63rem;
          background-color: #51B99B;
          
        }
      }
      li:nth-child(3){
        background:url(../assets/img/icon/dydj.png)center/cover no-repeat;
        p:nth-child(2){
          width: 1.63rem;
          background-color: #477DEA;
          
        }
      }
      li:nth-child(4){
        background:url(../assets/img/icon/ddcx.png)center/cover no-repeat;
        p:nth-child(2){
          width: 1.63rem;
          background-color: #E49A1E;
          
        }
      }
      li:nth-child(2n){
        margin-left: 0.4rem;
      }
    }
    
  }
  .header {
    height: 1.1rem;
    background-color: #eeeeee;
    div {
      margin: 0.3rem 0 0 0.24rem;
      span {
        width: 0.2rem;
        height: 0.627rem;
        background-color: #46c0b3;
      }
      span:nth-of-type(2) {
        background-color: #fff;
      }
    }
    strong {
      line-height: 1.1rem;
      margin-left: 0.2rem;
      font-size: 0.453rem;
      color: #000;
      font-weight: 400;
    }
  }
  .assistant {
    ul{
      display: flex;
      flex-wrap: wrap;
      padding: 0 0.53rem;
      margin-top: 0.53rem;
      li{
        width: 25%;
        text-align: center;
        margin-bottom: 0.4rem;
        .img{
          img{
            width: 0.8rem;
            height: 0.8rem;
          }
          margin-bottom: 0.21rem;
        }
        span{
          font-size: 0.32rem;
          font-family:PingFangSC-Medium,PingFang SC;
          font-weight:500;
          color:rgba(102,102,102,1);
        }
      }
    }
    
  }
  .phone_num{
    /* color:#333;
    text-align: center;
    line-height: 0.6rem;
    font-size: 0.4rem;
    padding:0.2rem 0; */
    width: 8.93rem;
    height: 2.02rem;
    background:url(../assets/img/icon/phone_num.png)center/cover no-repeat;
    margin: 0 auto;
  }
  .make-an-pointment {
    padding-bottom: 0.507rem;
    header {
      .header;
      margin-bottom: 0.4rem;
    }
    
    .cont{
      width: 100%;
      display: flex;
      justify-content:center;
      h3{
        height:1.13rem;
        background:rgba(81,185,155,1);
        font-size: 0.34rem;
        font-family:PingFangSC-Semibold,PingFang SC;
        font-weight:600;
        color:rgba(255,255,255,1);
        line-height:1.13rem;
        text-align: center;
      }
      .left,.right{
        width:4.59rem;
        height:7.68rem;
        background:rgba(251,251,251,1);
        border-radius:0.26rem;
        border:2px solid rgba(81,185,155,1);
        overflow: hidden;
        ul{
          box-sizing: border-box;
          box-sizing: border-box;
          li{
            display: flex;
            font-size: 0.35rem;
            justify-content: center;
            font-family:PingFangSC-Regular,PingFang SC;
            font-weight:400;
            color:rgba(102,102,102,1);
            margin-top: 0.4rem;
            p{
              line-height: 0.34rem;
            }
          }
        }
      }
      .right{
        margin-left: -0.26rem;
        ul{
          padding-top: 0.67rem;
          li{
            margin-top: 1.01rem;
            font-family:PingFangSC-Semibold,PingFang SC;
            font-weight:600;
            color:rgba(81,185,155,1);
          }

        }
      }
      .left{
          background:rgba(251,251,251,1);
          border-radius:0.26rem ;
          border:1px solid rgba(234,233,233,1);
          height:7.48rem;
          margin-top: 0.2rem;
        h3{
          height:1.06rem;
          background:rgba(153,153,153,0.19);
          border-radius:0.26rem 0px 0px 0px;
          font-family:PingFangSC-Medium,PingFang SC;
          font-weight:500;
          color:rgba(51,51,51,1);
        }
      }
      
    }
    
  }
  .b-banner,
  .b-banner .swipe,
  .b-banner img {
    width: 100%;
    height: 5.36rem;
    display: block;
  }
  footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1.30rem;
    display: flex;
    background-color: #fff;
    border-top: 1px solid #efefef;
    .item{
      width: calc(100% / 3);
      text-align: center;
      font-size: 0.26rem;
      font-weight:500;
      color:#666666;
      font-family:PingFangSC-Medium,PingFang SC;
      line-height:0.37rem;
      margin-top: 0.16rem;
      .img{
        width: 0.58rem;
        height: 0.58rem;
        margin: 0 auto;
        background: url(../assets/img/icon/index.png)center/cover no-repeat;
      }
      .img.active{
         background: url(../assets/img/icon/index_active.png)center/cover no-repeat;
      }
      p.active{
        color:#51B99B
      }
    }
    .item:nth-child(2){
      .img{
        background: url(../assets/img/icon/order.png)center/cover no-repeat;
      }
      .img.active{
         background: url(../assets/img/icon/order_active.png)center/cover no-repeat;
      }
    }
    .item:nth-child(3){
      .img{
        background: url(../assets/img/icon/user.png)center/cover no-repeat;
      }
      .img.active{
         background: url(../assets/img/icon/user_active.png)center/cover no-repeat;
      }
    }
  }
}
.loading{
  width: 100%;
  height: 1rem;
  position: absolute;
  top:calc(50% - 0.5rem)
}
</style>
